<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="addGraphicLayer(0)">点</button>
        <button onclick="flyTo()">飞到</button>
        <button onclick="addGraphicLayer(1)">线</button>
        <button onclick="addGraphicLayer(2)">面</button>
        <button onclick="addGraphicLayer(3)">动态流线</button>
        <button onclick="addGraphicLayer(4)">圆</button>
        <button onclick="addGraphicLayer(5)">半球体</button>
        <button onclick="addGraphicLayer(6)">动圆</button>
        <button onclick="show(true)">显示</button>
        <button onclick="show(false)">隐藏</button>
        <button onclick="showEntity(true)">显示指定元素</button>
        <button onclick="showEntity(false)">隐藏指定元素</button>
        <button onclick="getById()">根据id获得</button>
        <button onclick="removeById()">移除指定id</button>
        <button onclick="removeAll()">移除所有</button>
        <button onclick="flyToById()">飞到面</button>
        <button onclick="exportJson()">导出json</button>
        <button onclick="importJson()">导入json</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });
        // 直接创建graphicLayer
        const gl = new cpc.GraphicLayer();
        map.add(gl);


        function addGraphicLayer(v) {
            switch (v) {
                case 0:
                    gl.addByOption({
                        id: "我的点",
                        position: {
                            x: 119.3006147,
                            y: 26.0316619,
                            z: 150,
                        },
                        ellipse: {
                            semiMinorAxis: 300.0,
                            semiMajorAxis: 300.0,
                            height: 20.0,
                            material: "../images/point/噪音.png", //Cesium.Color.RED.withAlpha(0.5),
                            extrudedHeight: 200.0,
                            rotation: Cesium.Math.toRadians(45),
                            outline: true, // height must be set for outline to display
                        },
                    });
                    break;
                case 1:
                    gl.addByOption({
                        id: "线",
                        polyline: {
                            positions: [
                                [119.3006147, 26.0316619, 500],
                                [118, 25, 500],
                            ],
                            width: 5,
                            material: Cesium.Color.RED,
                        },
                    });
                    break;
                case 2:
                    gl.addByOption({
                        id: "面",
                        polygon: {
                            hierarchy: [
                                [119.3006147, 26.0316619, 500],
                                [119.4, 25.9, 500],
                                [119.5, 26, 500],
                            ],
                            height: 0,
                            material: Cesium.Color.RED.withAlpha(0.5),
                            outline: true,
                            outlineColor: Cesium.Color.BLACK,
                        },
                    });
                    break;
                case 3:
                    const lon = 119,
                        lat = 26;
                    gl.addByOption({
                        name: "动态流线",
                        polyline: {
                            positions: [
                                [lon, lat, 2500],
                                [lon + 3, lat, 2500],
                                [lon + 3, lat + 10, 2500],
                            ],
                            width: 15,
                            material: new cpc.MaterialTrailImage({
                                speed: 20,
                                color: Cesium.Color.GREEN,
                                image: "../images/colors/colors1.png",
                                count: 2,
                                direction: true,
                                order: true,
                            }),
                        },
                    });
                    break;
                case 4:
                    gl.addByOption({
                        name: "圆",
                        position: {
                            x: 119,
                            y: 26,
                            z: 1500,
                        },
                        ellipse: {
                            height: 0,
                            semiMinorAxis: 500,
                            semiMajorAxis: 500,
                            material: Cesium.Color.RED.withAlpha(0.5),
                            outlineColor: Cesium.Color.RED,
                        },
                    });
                    break;
                case 5:
                    gl.addByOption({
                        position: {
                            x: 119,
                            y: 26,
                            z: 0,
                        },
                        ellipsoid: {
                            radii: new Cesium.Cartesian3(1000, 1000, 1000), //椭球的半径--x,y,z
                            maximumCone: Cesium.Math.toRadians(90), //椭圆形的最大圆锥角的属性
                            material: Cesium.Color.AQUAMARINE.withAlpha(0.3), //填充椭圆体的材料
                            outline: true, //是否勾勒出椭球
                            outlineColor: Cesium.Color.AQUAMARINE.withAlpha(0.5), //线的颜色
                            outlineWidth: 10, //线的宽度
                        },
                    });
                    break;
                case 6:
                    let _rotateAmount = 1,
                        _stRotation = 0;
                    gl.addByOption({
                        name: "圆",
                        position: {
                            x: 119,
                            y: 26,
                            z: 1500,
                        },
                        ellipse: {
                            height: 0,
                            semiMinorAxis: 5000,
                            semiMajorAxis: 5000,
                            stRotation: new Cesium.CallbackProperty(() => {
                                _stRotation += _rotateAmount;
                                if (_stRotation >= 360 || _stRotation <= -360) {
                                    _stRotation = 0;
                                }
                                return Cesium.Math.toRadians(_stRotation);
                            }, false),
                            material: new Cesium.ImageMaterialProperty({
                                image: "../images/point/circle_bg.png",
                                // color: Cesium.Color.BLUE,
                                repeat: new Cesium.Cartesian2(1, 1),
                                transparent: true,
                            }),
                            // outlineColor: Cesium.Color.RED
                        },
                    });
                    break;
            }
        }
        function show(show) {
            gl.show = show;
        }
        function showEntity(show) {
            gl.getById("我的点").show = show;
        }
        function getById() {
            console.log(gl.getById("我的点"));
        }
        function removeById() {
            gl.removeById("我的点");
        }
        function removeAll() {
            gl.removeAll();
        }
        function flyTo() {
            gl.flyTo();
        }
        function flyToById() {
            gl.flyToById("面");
        }
        function exportJson() {
            const json = gl.exportJson();
            console.log(JSON.stringify(json));
        }
        function importJson() {
            const json = [
                {
                    name: "圆",
                    show: true,
                    ellipse: {
                        semiMajorAxis: 5000,
                        semiMinorAxis: 5000,
                        height: 0,
                        material: {
                            image: "../images/point/circle_bg.png",
                            repeat: { x: 1, y: 1 },
                            transparent: true,
                            type: "ImageMaterialProperty",
                        },
                    },
                    position: {
                        x: -2781677.9523375393,
                        y: 5018279.865802549,
                        z: 2779719.503082418,
                    },
                },
            ];
            gl.importJson(json);
        }
    </script>
</body>

</html>